<template>
  <div class="search-part">
    <div class="common-top">
      <div class="common-top-search">
        <div class="location-area" @click="cityDialogVisible = true">
          <span class="text">{{ curCity }}</span>
          <i class="icon-right"></i>
        </div>
        <div class="input-area">
          <img class="icon_search" @click="searchStore" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
          <!-- TODO 小程序使用confirm -->
          <input class="" v-model="shopName" @confirm="searchStore" type="text" placeholder="店铺名称">
        </div>
      </div>
    </div>
    <a-map ref="aMaps" @getLoaction="getLoactionFn" :showLoading="true"/>
    <location-city ref="locationCity" @change="cityChangeFn" @refresh="refreshLocation" :visible.sync="cityDialogVisible"></location-city>
  </div>
</template>

<script>
  import Vue from 'vue'
  import aMap from '../components/amap'
  import locationCity from '@/components/locationCity'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        curCity: '请选择',
        cityDialogVisible: false,
        shopName: ''
      }
    },
    components: {
      aMap,
      locationCity
    },
    methods: {
      // TODO 刷新定位
      refreshLocation() {
        this.$refs.aMaps.getCurrentPost()
      },
      // 地图获取定位
      getLoactionFn(val) {
          this.cityDialogVisible = false
          this.curCity = val.address_component.district
        this.$refs.locationCity.curCity = this.curCity
        this.$emit('getLoaction', { lat: val.location.lat, lng: val.location.lng })
      },
      // 选择了城市之后抛出的城市id
      cityChangeFn(val) {
        this.curCity = val.cityName
        this.$emit('change', val)
      },
      // 搜索店铺名
      searchStore() {
        this.$emit('searchStore', this.shopName)
      }
    },
    mounted() {
      this.$refs.aMaps.isClearLocationInfo() // 如果不是当天清楚缓存
    }
  })
</script>

<style lang="scss">
  @import 'src/styles/mixin';
  .search-part{
    .common-top{
      padding: 24px 0;
      background: #fff;
      border-radius:0 0 20px 20px;
      &-search{
        display: flex;
        .location-area{
          color: #333;
          padding-left: 29px;
          padding-top: 18px;
          .text{
            @include showEllipsis;
            @include alignTop;
            max-width: 120px;
            line-height: 36px;
          }
          .icon{
            @include alignTop;
            margin-top: 5px;
            font-size: 18px;
            transform: rotate(-90deg);
          }
          .icon-right {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            margin-left: 6px;
          }
        }
        .input-area{
          flex: 1;
          padding: 0 20px;
          height: 72px;
          line-height: 72px;
          background: #F7F7F7;
          border-radius: 40px;
          margin: 0 20px;
          display: flex;
          align-items: center;
          .icon_search {
            width: 28px;
            height: 36px;
            margin-right: 6px;
          }
          input{
            line-height: 36px;
            height: 32px;
            background: #F7F7F7;
            width: 480px;
            margin-right: 10px;
          }
        }
      }
    }
  }
</style>
